import {Button, Col, Drawer, Form, Input, Row, Switch, Table} from "antd";
import React, {PureComponent} from "react";
import NumInput from "@/pages/RadarChart/base/NumInput";
import MinusCircleOutlined from "@ant-design/icons/lib/icons/MinusCircleOutlined";
import PlusOutlined from "@ant-design/icons/lib/icons/PlusOutlined";


export default class AbilityWeightEdit extends PureComponent {

  state = {
    extraColumns: [],
    visible: false,
  }

  baseColumns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      render: text => <a>{text}</a>,
    },
    {
      title: '权重',
      dataIndex: 'weight',
      key: 'weight',
      render: (value, data, index) => this.renderColumn(value, data, index, "weight")
    },
    {
      title: '重要能力',
      dataIndex: 'deadline',
      key: 'deadline',
      render: data => (
        <Switch
          checkedChildren={"是"}
          unCheckedChildren={"否"}
          defaultChecked={false}
        />
      ),
    },

  ];


  renderColumn(value, data, index, key) {


    return <NumInput max={100} min={0} defaultValue={value}
                     onChange={(v, d) => {
                       data[key] = v;
                     }}/>;
  }




  onClose() {
    this.setState({visible: false});
  }



  render() {

    let columns = this.baseColumns.concat(this.state.extraColumns);
    return <div>
      <Button onClick={() => this.setState({visible: true})}>维护级别</Button>

      <Drawer
        title="级别维护"
        width={720}
        onClose={() => this.onClose()}
        visible={this.state.visible}
        bodyStyle={{paddingBottom: 80}}

      >
        <Form name="from" autoComplete="off" onFinish={(values) => {
          console.log(values)
        }}>
          <Form.List name="users">
            {(fields, {add, remove}) => {
              return (
                <div>
                  {fields.map(field => (
                    <Row>
                      <Col span={20}>
                        <Form.Item
                          {...field}
                          name={[field.name, 'name']}
                          fieldKey={[field.fieldKey, 'name']}
                          rules={[{required: true, message: '缺失名称'}]}
                        >
                          <Input placeholder="添加级别明细"/>

                        </Form.Item>
                      </Col>
                      <Col span={4}>
                        <MinusCircleOutlined
                          style={{margin: "0.5em"}}
                          onClick={() => {
                            remove(field.name);
                          }}
                        />
                      </Col>
                    </Row>
                  ))}

                  <Form.Item>
                    <Button
                      type="dashed"
                      onClick={() => {
                        add();
                      }}
                      block
                    >
                      <PlusOutlined/> Add field
                    </Button>
                  </Form.Item>
                </div>
              );
            }}
          </Form.List>
          <Form.Item>
            <Button onClick={() => this.onClose()} style={{marginRight: 8}}>
              Cancel
            </Button>
            <Button type="primary" htmlType="submit" onClick={() => {

              this.onClose();
            }

            }>
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Drawer>

      <Table rowSelection={{
        type: "checkbox"
      }} columns={columns} dataSource={this.props.dataSource}></Table>
    </div>
      ;
  }
}


